<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
<div class="addBrand-container" id="food-add-app">
    <div class="container">
        <el-upload class="avatar-uploader"
                   action="/common/upload"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeUpload"
                   ref="upload"
                   accept="image/*, video/*">
            <img v-if="imageUrl && isImage" :src="imageUrl" class="avatar"></img>
            <video v-else-if="imageUrl && !isImage" :src="imageUrl" class="avatar" controls></video>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/index.js"></script>
<script>
    new Vue({
        el: '#food-add-app',
        data() {
            return {
                imageUrl: '',
                isImage: true // 标记当前是否为图片，用于显示图片或视频
            }
        },
        methods: {
            handleAvatarSuccess (response, file, fileList) {
                const suffix = file.name.split('.').pop().toLowerCase();
                if (['png', 'jpeg', 'jpg'].includes(suffix)) {
                    this.imageUrl = `/common/download?name=${response.data}`;
                    this.isImage = true;
                } else {
                    // 如果是视频文件，可以根据后缀名或其他标识进行判断
                    this.imageUrl = `/common/download?name=${response.data}`;
                    this.isImage = false;
                }
            },
            beforeUpload (file) {
                if (file) {
                    const suffix = file.name.split('.').pop().toLowerCase();
                    const isImage = ['png', 'jpeg', 'jpg'].includes(suffix);
                    const isVideo = ['mp4', 'avi', 'mov'].includes(suffix);
                    const size = file.size / 1024 / 1024 < 50; // 假设限制文件大小为50MB

                    if (!isImage && !isVideo) {
                        this.$message.error('上传文件只支持图片（png、jpeg、jpg）和视频（mp4、avi、mov）格式！');
                        this.$refs.upload.clearFiles();
                        return false;
                    }

                    if (!size) {
                        this.$message.error('上传文件大小不能超过 50MB!');
                        return false;
                    }

                    return file;
                }
            }
        }
    })
</script>
</body>
</html>


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--  <meta charset="UTF-8">-->
<!--  <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<!--  <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--  <title>文件上传</title>-->
<!--  &lt;!&ndash; 引入样式 &ndash;&gt;-->
<!--  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />-->
<!--  <link rel="stylesheet" href="../../styles/common.css" />-->
<!--  <link rel="stylesheet" href="../../styles/page.css" />-->
<!--</head>-->
<!--<body>-->
<!--   <div class="addBrand-container" id="food-add-app">-->
<!--    <div class="container">-->
<!--        <el-upload class="avatar-uploader"-->
<!--                action="/common/upload"-->
<!--                :show-file-list="false"-->
<!--                :on-success="handleAvatarSuccess"-->
<!--                :before-upload="beforeUpload"-->
<!--                ref="upload">-->
<!--            <img v-if="imageUrl" :src="imageUrl" class="avatar"></img>-->
<!--            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--        </el-upload>-->
<!--    </div>-->
<!--  </div>-->
<!--    &lt;!&ndash; 开发环境版本，包含了有帮助的命令行警告 &ndash;&gt;-->
<!--    <script src="../../plugins/vue/vue.js"></script>-->
<!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--    <script src="../../plugins/element-ui/index.js"></script>-->
<!--    &lt;!&ndash; 引入axios &ndash;&gt;-->
<!--    <script src="../../plugins/axios/axios.min.js"></script>-->
<!--    <script src="../../js/index.js"></script>-->
<!--    <script>-->
<!--      new Vue({-->
<!--        el: '#food-add-app',-->
<!--        data() {-->
<!--          return {-->
<!--            imageUrl: ''-->
<!--          }-->
<!--        },-->
<!--        methods: {-->
<!--          handleAvatarSuccess (response, file, fileList) {-->
<!--              this.imageUrl = `/common/download?name=${response.data}`-->
<!--          },-->
<!--          beforeUpload (file) {-->
<!--            if(file){-->
<!--              const suffix = file.name.split('.')[1]-->
<!--              const size = file.size / 1024 / 1024 < 2-->
<!--              if(['png','jpeg','jpg'].indexOf(suffix) < 0){-->
<!--                this.$message.error('上传图片只支持 png、jpeg、jpg 格式！')-->
<!--                this.$refs.upload.clearFiles()-->
<!--                return false-->
<!--              }-->
<!--              if(!size){-->
<!--                this.$message.error('上传文件大小不能超过 2MB!')-->
<!--                return false-->
<!--              }-->
<!--              return file-->
<!--            }-->
<!--          }-->
<!--        }-->
<!--      })-->
<!--    </script>-->
<!--</body>-->
<!--</html>-->